<!--
 * @Author: whq
 * @Date: 2025-08-06 14:07:11
 * @LastEditTime: 2025-08-06 14:16:01
 * @LastEditors: whq
 * @Description: 
 * @FilePath: /app/src/pages/cardsDetail/ChatSnippet.vue
-->
<template>
  <view class="chat-snippet">
    <view class="snippet-header">
      <text class="header-text">不错不错</text>
      <view class="user-info">
        <image src="https://picsum.photos/32" mode="aspectFill" class="avatar" />
        <text class="nickname">用户昵称</text>
        <text>💬</text>
        <text class="dialogue-count">N条对话</text>
        <text>🕒</text>
        <text class="time-ago">5天前</text>
      </view>
    </view>

    <view class="conversation-body">
      <view class="message-row">
        <image src="https://picsum.photos/32?random=1" mode="aspectFill" class="avatar" />
        <view class="message-bubble user-a">你好啊！</view>
      </view>
      <view class="message-row">
        <image src="https://picsum.photos/32?random=2" mode="aspectFill" class="avatar" />
        <view class="message-bubble user-b">你好，很高兴认识你。</view>
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref } from "vue";
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
});
</script>
<style scoped lang="scss">
.chat-snippet {
  border: 1rpx solid #eee;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
  // background-color: #ffffff;
}

.snippet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
  font-size: 28rpx;
}
.header-text {
  font-weight: 500;
}
.user-info {
  display: flex;
  align-items: center;
  gap: 12rpx;
  color: var(--text-regular);
  font-size: 24rpx;
}
.avatar {
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
}
.nickname {
  font-weight: 500;
  color: var(--text-regular);
}

.conversation-body {
  padding: 16rpx;
  // background-color: #f9f9f9;
  border-radius: 12rpx;
  font-size: 28rpx;
}
.message-row {
  display: flex;
  align-items: center;
  gap: 16rpx;
}
.message-row:not(:last-child) {
  margin-bottom: 16rpx;
}
.message-bubble {
  padding: 12rpx 24rpx;
  border-radius: 24rpx;
}
.user-a {
  background-color: #d1e7dd;
}
.user-b {
  background-color: #f8d7da;
}
</style>
